<template>
  <div class="menuDrawer-wrap el-card__body">
    <div>
      <form class="el-form">
        <div class="el-row" span="24">
          <div class="avue-group avue-group--header" index="0" active="1">
            <div role="tablist" aria-multiselectable="true" class="el-collapse">
              <div class="el-collapse-item is-active">
                <div
                        role="tab"
                        aria-expanded="true"
                        aria-controls="el-collapse-content-3774"
                        aria-describedby="el-collapse-content-3774"
                >
                  <div
                          role="button"
                          id="el-collapse-head-3774"
                          tabindex="0"
                          class="el-collapse-item__header is-active"
                  >
                    <i
                            class="
                        el-collapse-item__arrow
                        el-icon-arrow-right
                        is-active
                      "
                    ></i>
                  </div>
                </div>
                <div
                        role="tabpanel"
                        aria-labelledby="el-collapse-head-3774"
                        id="el-collapse-content-3774"
                        class="el-collapse-item__wrap"
                >
                  <div class="el-collapse-item__content">
                    <div class="avue-form__group avue-form__group--flex">
                      <div
                              v-for="i in sonColumnData"
                              :key="i"
                              v-model="form"
                              class="
                          el-col
                          el-col-12
                          el-col-offset-0
                          el-col-xs-24
                          el-col-sm-12
                          el-col-md-12
                          avue-form__row
                          avue--detail
                        "
                              style="padding-left: 10px; padding-right: 10px"
                      >
                        <div
                                class="
                            el-form-item el-form-item--small
                            avue-form__item--
                          "
                        >
                          <label
                                  class="el-form-item__label"
                                  style="width: 120px"
                          >
                            {{ i.label }}:</label
                          >
                          <div
                                  class="el-form-item__content"
                                  style="margin-left: 120px"
                          >
                            <!---->
                            <div disabled="disabled" content="请输入 流程编号">
                              <div
                                      class="
                                  el-input el-input--small
                                  is-disabled
                                  avue-input
                                "
                                      column-slot="menuForm"
                                      search="true"
                                      index=""
                                      boxtype="view"
                              >
                                {{ form[i.prop] }}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
      <!--操作按钮-->
      <div class="closeBtn" >
        <el-button
                v-show="flowStatus && (userInfo.account==form.flowOperator || ''==form.flowOperator) && form.submitStatus != 2"
                icon="el-icon-check"
                size="small"
                plain
                type="success"
                @click="agree()"
        >确认并提交</el-button
        >
        <el-button
                v-show="flowStatus && userInfo.account==form.flowOperator"
                @click="process"
                type="danger"
                icon="el-icon-close"
                :size="'small'"
                plain
        >驳回</el-button
        >
      </div>
    </div>
    <avue-crud
            :option="codeDetailOptions.options"
            :data="data"
            :page.sync="menuPage"
            @selection-change="selMenuChange"
            @on-load="onLoad"
    >
    </avue-crud>
    <my-drawer
            class="avue-dialog bidBusinessDrawer"
            :title="'查看'"
            :showDraw="successShow"
            @close="successShow = false"
    >
    </my-drawer>
    <el-dialog
            :title="'请选择【'+flowNodeName+'】经办人'"
            :visible.sync="dialogVisible"
            width="31%"
            :before-close="handleClose"
            :modal-append-to-body="false"
    >
      <div>
        <el-radio
                v-model="radioTreaty"
                :label="index"
                border
                @change="agreeChange"
                text-color="#409eff"
                v-for="(item, index) in dataSlect"
                :key="index"
        >
          <div class="avue-card__item">
            <div class="avue-card__body">
              <div class="avue-card__avatar">
                <img :src="item.avatar === '' ? UserImage : item.avatar" alt="" />
              </div>
              <div class="avue-card__detail">
                <div class="avue-card__title">{{ item.name }}</div>
                <div class="avue-card__info">{{ item.email }}</div>
              </div>
            </div>
          </div>
        </el-radio>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="selectNextPerson(1)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
    import request from '@/router/axios'
    import {mapGetters} from "vuex";
    import { getWorkList, getNextNodePerson } from '@/api/approve/approve'
    export default {
        props: {
            flowModelId:{
                type: Object,
                required:true,
            },
            // 表单列表
            formsList: {
                type: Object,
                required: true
            },
            // 详情列表
            detaiList: {
                type: Object,
                required: true
            },
            // 操作权限
            flowStatus:{
                type:Boolean,
                default:true
            },
            // 提交URL
            submitUrl:{
                type:String,
                required: true
            },
            // 驳回URL
            returnUrl:{
                type:String,
                required: true
            }
        },
        data () {
            return {
                UserImage: require('@/assets/images/icon_people.png'),
                radioTreaty: 0,
                dataSlect: [],
                currentNodeName:"",
                flowNodeName:"",
                flowSubmitText:"",
                isEndNode:"",
                data: [],
                successShow: false,
                dialogVisible: false,
                form: this.formsList,
                detailOptions: this.detaiList,
                sonColumnData: [],
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                codeDetailOptions: {
                    options: {
                        columnBtn: false,
                        refreshBtn: false,
                        menu: false,
                        dialogDirection: 'ltr',
                        menuForm: false,
                        dialogType: 'drawer',
                        //height: 'auto',
                        calcHeight: 30,
                        tip: false,
                        searchShow: true,
                        searchMenuSpan: 6,
                        border: true,
                        selection: false,
                        editBtn: true,
                        addBtn: false,
                        viewBtn: true,
                        dialogWidth: 900,
                        // height:500,
                        dialogClickModal: false,
                        column: [
                            {
                                label: '节点',
                                prop: 'node'
                            },
                            {
                                label: '动作',
                                prop: 'opera'
                            },

                            {
                                label: '经办人员',
                                prop: 'submitUser'
                            },
                            {
                                label: '审批意见',
                                prop: 'operaOpinion'
                            },
                            {
                                label: '审批时间',
                                prop: 'submitTime'
                            }
                        ]
                    },
                }
            }
        },

        computed:{
            ...mapGetters(["userInfo"]),
        },

        methods: {
            onLoad (page, params = {}) {
                this.loading = true
                getWorkList(
                    page.currentPage,
                    page.pageSize,
                    this.formsList.id,
                    Object.assign(params, this.query)
                ).then(res => {
                    const data = res.data.data
                    this.page.total = data.total
                    this.data = data.records
                    this.loading = false
                })
            },

            //待办流程
            process () {
                const h = this.$createElement;
                let that = this;
                this.$prompt(h('div', null, [h('p', null, '驳回原由：')]), '驳回原由：', {
                    inputValidator (value) {
                        if (value == undefined || value.length == 0 || value.trim() == '') {
                            return '驳回原由不能为空'
                        }
                    },
                    inputErrorMessage: '驳回原由不能为空！',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                })
                    .then(({ value }) => {
                        that.flowSubmitText = value;
                        that.selectNextPerson(2);
                    })
                    .catch(() => {})
            },
            // 选择下一节点审批人并确定
            selectNextPerson (type) {
                let { radioTreaty } = this
                let params = {
                    // 流程实例ID
                    flowId: this.flowModelId,
                    // 流程节点序号
                    flowNodeIndex: this.form.flowNodeIndex,
                    // 流程节点名称
                    flowNodeName: this.flowNodeName,
                    // 是否结束节点
                    isEndNode: this.isEndNode,
                    //流程提交人
                    flowSubmitPerson:this.isEndNode == 0?type==1?this.dataSlect[radioTreaty].account:"":"",
                    //流程审批意见
                    flowSubmitText: this.flowSubmitText
                }
                this.flowSubmitOpera(this.form.id,params,type).then(res => {
                    if (res.data.success) {
                        this.$message({
                            type: 'success',
                            message: res.data.msg
                        })
                    } else {
                        this.$message({
                            type: 'warning',
                            message: res.data.msg
                        })
                    }
                })
                this.dialogVisible = false;
                this.$emit("closeFlow");
            },
            // 加载方法
            init () {
                this.form =  this.formsList;;
                let columnArr = this.detailOptions.options.column
                    .filter(item => {
                        return item.type != 'select' && item.type != 'upload' && item.viewDisplay == true
                    })
                    .map(item => {
                        return item
                    })
                this.sonColumnData = columnArr;
                // 加载列表
                this.onLoad(this.page);
            },
            // 同意,选择下一节点审批人
            agree () {
                let that = this;
                let params = {
                    // 流程模型ID
                    // flowModelId: '1512276773296431106',
                    flowModelId: this.flowModelId,
                    index: this.form.flowNodeIndex,
                }
                getNextNodePerson(params).then(res => {
                    if (res.data.success) {
                        // 下一节点审批人列表赋值
                        that.dataSlect = res.data.data.nodeUserList;
                        // 当前流程节点名称
                        that.flowNodeName = res.data.data.flowNodeName;
                        // 是否结束节点
                        that.isEndNode = res.data.data.isEndNode;
                        if(that.isEndNode == 1){
                            this.selectNextPerson(1);
                            this.onLoad(this.page);
                        }else{
                            this.dialogVisible = true
                        }
                    } else {
                        this.$message({
                            type: 'warning',
                            message: res.data.msg
                        })
                        this.onLoad(this.page);
                    }
                })
            },

            // 流程同意接口
            flowSubmitOpera (id,flowParams,type) {
                return request({
                    url: type==1?this.submitUrl:this.returnUrl,
                    method: 'post',
                    data: flowParams,
                    params: {
                        id:id
                    }
                })
            },

            // 加载数据
            agreeChange: function (val) {
                this.radioTreaty = val
            }
        }
    }
</script>

<style lang="scss" scoped>
  .el-form {
    padding-top: 20px;
  }
  .closeBtn {
    display: flex;
    justify-content: center;
    padding-right: 20px;
    .el-button--success.is-plain {
      margin-right: 20px;
    }
  }
  .el-radio.is-bordered {
    height: auto;
    margin-left: 0px;
  }
  .avue-card__item {
    width: 200px;
    border: none;
    margin-top: 10px;
    height: auto;
  }
  .avue-card__info {
    height: auto;
  }
  .avue-card__avatar {
    margin-left: 12px;
  }
  /deep/.theme-hey .el-radio__input.is-checked .el-radio__inner {
    border-color: #409eff !important;
    background: #409eff !important;
  }
  .el-radio.is-bordered + .el-radio.is-bordered {
    margin-left: 0px;
    margin-top: 10px;
  }
  .card__info {
    width: 50px;
  }
  .el-radio {
    white-space: normal;
  }
  .avue-card__body {
    padding: 20px 20px 30px 0px;
  }
</style>
